<template>
  <div class="main-form-box">
    <!-- 拖拽为空时显示 -->
    <div class="null-form" v-if="configFormData.list.length === 0">
      <i class="el-icon-files null-icon"></i>
      <div>请从组件库中拖拽至此处</div>
    </div>
    <el-form
      :size="configFormData.config.size"
      :label-position="configFormData.config.labelPosition"
      :label-width="configFormData.config.labelWidth + 'px'"
      style="height: 100%;"
    >
      <!--   拖拽展示组件, .movetag表示内部只有class为movetag才可以拖动   -->
      <draggable
        v-model="configFormData.list"
        @add="handleWidgetAdd"
        v-bind="{ group: 'people', animation: 200 }"
        class="container-form"
        handle=".movetag"
      >
        <div
          v-for="(item, index) in configFormData.list"
          :key="index"
          class="formitem-style"
        >
          <div class="form-margin" v-if="index !== 0"></div>
          <FormItem
            v-if="item && item.key"
            :select.sync="selectWidget"
            :eleItem="item"
            :eleIndex="index"
            :listdata="configFormData"
            class="form-item"
          />
          <div class="form-margin"></div>
          <div v-if="index === configFormData.list.length - 1" class="tip">
            将组件拖拽到此来添加
          </div>
        </div>
      </draggable>
    </el-form>
  </div>
</template>

<script>
import draggable from "vuedraggable";
import FormItem from "./FormItem";
export default {
  name: "WidgetForm",
  components: {
    draggable,
    FormItem,
  },
  props: {
    // 接受拖拽传过来的数据
    configFormData: {
      type: Object,
      default: () => {
        return {
          list: [],
        };
      },
    },
    select: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  data() {
    return {
      selectWidget: this.select,
    };
  },
  watch: {
    select(n) {
      this.selectWidget = n;
    },
    selectWidget(n) {
      this.$emit("update:select", n);
    },
  },
  methods: {
    // 拖拽完成事件
    handleWidgetAdd(e) {
      console.log("触发add", e);
      // 拖拽之后 list 中会push component的数据
      // 拖到渲染区后的 index
      const { newIndex } = e;
      console.log("list", this.configFormData.list);
      // 添加唯一key
      const key = `${Date.parse(new Date())}_${Math.ceil(Math.random() * 999)}`;
      // 深拷贝原先的数据，并且添加key, remoteFunc，model, rules
      this.$set(this.configFormData.list, newIndex, {
        ...this.configFormData.list[newIndex],
        options: {
          ...this.configFormData.list[newIndex].options,
          remoteFunc: "func_" + key,
        },
        key,
        model: this.configFormData.list[newIndex].type + "_" + key,
        rules: [],
      });

      this.$set(
        this.configFormData.list,
        newIndex,
        JSON.parse(JSON.stringify(this.configFormData.list[newIndex]))
      );
      // 获取拖拽的表单数据
      this.selectWidget = this.configFormData.list[newIndex];
      console.log(this.configFormData.list);
    },
  },
};
</script>

<style lang="scss" scoped>
.main-form-box {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-color: #fff;
}
.null-form {
  position: absolute;
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr 1fr;
  justify-items: center;
  color: #999999;
  background-color: #fff;
}
.null-icon {
  display: grid;
  align-items: end;
  font-size: 93px;
}
.container-form {
  height: 100%;
  // padding-right: 5px;
}
.formitem-style {
  background-color: #fff;
  position: relative;
  // margin: 10px 0;
  // border: 1px dashed #999;
}
.form-margin {
  height: 10px;
  width: 100%;
  background-color: rgb(242, 242, 242);
}
.tip {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 50px;
  color: #409eff;
}
.form-item {
  padding: 5px;
}
</style>
